
import React, {Component} from 'react';

import styles from './GiftDetail.css';

import SearchPage from "../../components/SearchPage";
import GiftLocationPros from "../../components/GiftLocationPros";
import {Link, Redirect} from "react-router-dom";
import {Router} from 'react-router';
import {message} from "antd";
import PointService from "../../business/point/PointService";
import {GiftGoodsDomain} from "../../business/gift/GiftGoodsDomain";
import OrderNav from "../../components/order/OrderNav";




const giftName='现金10000元';


class GiftDetailModel extends Component<GiftLocationPros,any> {
  constructor(props){
    super(props);
    this.state ={
      redirect:false,
      gift:new GiftGoodsDomain(),
      exchangeNumber:1,
      prizeMax:10,
    }
    this.pointService = new PointService();
    this.prizeCountMinus = this.prizeCountMinus.bind(this);
    this.prizeCountPlus = this.prizeCountPlus.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.checkPoint = this.checkPoint.bind(this);
    this.exchangeCheck = this.exchangeCheck.bind(this);
  }

  pointService:PointService;

  prizeCountMinus(e){
    let exchangeNumber = this.state.exchangeNumber;
    e.preventDefault();
    if(isNaN(exchangeNumber)){
      exchangeNumber=1;
    }
    if(exchangeNumber<=1){
      exchangeNumber=1;
    }else{
      exchangeNumber =exchangeNumber-1;
    }
    var event ={target:{value:exchangeNumber}};
    this.handleChange(event)
  }

  prizeCountPlus(e,maxCount){
    e.preventDefault();
    let exchangeNumber = this.state.exchangeNumber;
    if(isNaN(exchangeNumber)){
      exchangeNumber=0;
    }
    if(exchangeNumber>=maxCount){
      exchangeNumber =maxCount;
    }else{
      exchangeNumber=eval(exchangeNumber)+1;

    }
    var event ={target:{value:exchangeNumber}};
    this.handleChange(event)
  }

  handleChange(event) {
    this.setState({exchangeNumber: event.target.value});
  }

  checkPoint(res,isSuccess,gift:GiftGoodsDomain){
    const {state} =  this.props.location;
    if(isSuccess && res.code == '200'){
      if(state.gift.goodsPoints > res.data){
        message.info("抱歉,您当前的积分不够兑换礼品");
      }else{
        this.setState({ redirect:true,gift:gift});
      }
    }else{
      message.info(res.message);
    }
  }

  exchangeCheck(e,gift:GiftGoodsDomain){
    e.preventDefault();
    if(gift.goodsQuantity == 0){
      message.info("该产品暂时缺货，请耐心等待");
      return;
    }
    let loginToken = sessionStorage.getItem("loginToken");
    let username = sessionStorage.getItem("username");
    if(loginToken!=undefined && loginToken !='' &&username!=undefined && username !='' ){
        this.pointService.queryPoint(username,gift,loginToken,this.checkPoint)
    }else{
      message.info("您还没有登陆或登陆超时，请重新登陆");
    }
  }

  maxExchange(gift){
    if(gift.limitType&&gift.goodsQuantity>gift.limitCount){
      return gift.limitCount;
    }else{
      return gift.goodsQuantity;
    }

  }

  render() {
    const {gift,userPoint} =  this.props.location.state;
    const {redirect} = this.state;
    if(redirect){
      return (<Redirect to={{
        pathname :"/point-shopping/Order",
        state : {
          gift:this.state.gift,
          exchangeNumber:this.state.exchangeNumber,
          bodyName:2,
        },
      }}/>);
    }
    let username = sessionStorage.getItem('username');
    username = username==undefined?'':username;
    return (
      <div className={styles.normal}>
        <SearchPage giftName={gift.goodsName} userPoint={userPoint} username={username}/>
        <OrderNav bodyName={1}/>
        <div className={[styles.section,styles["section-buypanel"]].join(' ')}>
          <div className={styles.section_buypanel}>
            <div className={styles.buypanel_pic}>
              <img src={process.env.POINT_SHOPPING_URL+"/point-shopping/goods/show/"+gift.goodsImageName} alt=""/>
            </div>
            <div className={styles.buypanel_detail}>
              <div className={styles.detail_header}>
                <span className={styles.header_name}>{gift.goodsName}</span>
                <span className={styles.header_descript}></span>
              </div>
              <div className={styles.detail_body}>
                <p className={styles.body_cost}>兑换分值：
                  <span id="price">{gift.goodsPoints}</span>
                  积分
                </p>
                <p className={styles.body_exchanged}>已兑换：<span>{gift.exchangeCount}</span>件</p>
                <div className={styles.body_num}>
                  <span>兑换数量：</span>
                  <div className={styles["mod-form-numselector"]}>
                    <a id="prize-count-minus" href="javascript:void(0)" onClick={this.prizeCountMinus}>
                      -
                    </a>
                    <input className={styles.mod_form_input} type="text" value={this.state.exchangeNumber} onChange={this.handleChange}/>
                    <a id="prize-count-plus" href="javascript:void(0)" onClick={ (e) => {
                      this.prizeCountPlus(e,this.maxExchange(gift))
                    }}>
                      +
                    </a>
                  </div>
                  <span className={styles.num_remain}>剩余:<span>{gift.goodsQuantity}</span>件</span>
                </div>

              </div>
              <div className="detail_footer">
                <div >
                  <Link id="prize-exchange"
                        onClick={(e)=>this.exchangeCheck(e,gift)}
                        className={[styles["mod-btn"],styles["mod-btn-shop-orange"]].join(' ')}
                        to="/point-shopping">
                    立即兑换
                  </Link>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className ={[styles.section,styles["section-tabs"]].join(' ')} >
          <div className = {styles.section_tabs} >
            <ul>
              <li>
                <a href = "javascript:void(0)" > 产品详情 </a>
              </li >
            </ul >
          </div >
        </div >
        <div className={[styles.section,styles["section-info"]].join(' ')} >
          <div id="prize-desc" className={styles.section_info}>
            {gift.content}
          </div>
        </div>
      </div>
    );
  }
}

export default GiftDetailModel
